<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>Document</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";height:1000px;}
			/*太极图开始*/
			.box1{
				position:relative;
				display:inline-block;
				width:200px;
				height:200px;
				margin:50px 0 0 50px;
				border:1px solid black;
				box-shadow:0 0 5px 5px yellow;
				border-radius:50%;
				animation:box 5s linear infinite;
			}
			@keyframes box{
				100%{
					transform:rotate(360deg);
				}
			}
			.box2{
				width:200px;
				height:100px;
				background:white;
				border-radius:100px 100px 0 0;
			}
			.box3{
				width:200px;
				height:100px;
				background:black;
				border-radius:0 0 100px 100px;
			}
			.box4{
				position:absolute;
				top:50px;
				left:0;
				width:100px;
				height:100px;
				background:black;
				border-radius:50%;
			}
			.box5{
				position:absolute;
				top:50px;
				left:100px;
				width:100px;
				height:100px;
				background:white;
				border-radius:50%;
			}
			.box6{
				position:absolute;
				top:75px;
				left:25px;
				width:50px;
				height:50px;
				background:white;
				border-radius:50%;
			}
			.box7{
				position:absolute;
				top:75px;
				left:125px;
				width:50px;
				height:50px;
				background:black;
				border-radius:50%;
			}
			/*太极图结束*/
			/*花开始*/
			.flower{
				position:relative;
				display:inline-block;
				width:200px;
				height:200px;
				margin:50px 0 0 50px;
			}
			.flower0{
				position:absolute;
				top:100px;
				left:0;
				width:100px;
				height:25px;
				background:yellow;
				border-radius:50%;
				transform-origin:100% 50%;
				animation:flower-0 2s linear infinite;
			}
			@keyframes flower-0{
				0%{transform:rotate(0deg)}
				100%{transform:rotate(0deg)}
			}
			.flower1{
				position:absolute;
				top:100px;
				left:0;
				width:100px;
				height:25px;
				background:yellow;
				border-radius:50%;
				transform-origin:100% 50%;
				animation:flower-1 2s linear infinite;
			}
			@keyframes flower-1{
				0%{transform:rotate(0deg)}
				100%{transform:rotate(30deg)}
			}
			.flower2{
				position:absolute;
				top:100px;
				left:0;
				width:100px;
				height:25px;
				background:yellow;
				border-radius:50%;
				transform-origin:100% 50%;
				animation:flower-2 2s linear infinite;
			}
			@keyframes flower-2{
				0%{transform:rotate(0deg)}
				100%{transform:rotate(60deg)}
			}
			.flower3{
				position:absolute;
				top:100px;
				left:0;
				width:100px;
				height:25px;
				background:yellow;
				border-radius:50%;
				transform-origin:100% 50%;
				animation:flower-3 2s linear infinite;
			}
			@keyframes flower-3{
				0%{transform:rotate(0deg)}
				100%{transform:rotate(90deg)}
			}
			 .flower4{
				position:absolute;
				top:100px;
				left:0;
				width:100px;
				height:25px;
				background:yellow;
				border-radius:50%;
				transform-origin:100% 50%;
				animation:flower-4 2s linear infinite;
			}
			@keyframes flower-4{
				0%{transform:rotate(0deg)}
				100%{transform:rotate(120deg)}
			}
			.flower5{
				position:absolute;
				top:100px;
				left:0;
				width:100px;
				height:25px;
				background:yellow;
				border-radius:50%;
				transform-origin:100% 50%;
				animation:flower-5 2s linear infinite;
			}
			@keyframes flower-5{
				0%{transform:rotate(0deg)}
				100%{transform:rotate(150deg)}
			}
			.flower6{
				position:absolute;
				top:100px;
				left:0;
				width:100px;
				height:25px;
				background:yellow;
				border-radius:50%;
				transform-origin:100% 50%;
				animation:flower-6 2s linear infinite;
			}
			@keyframes flower-6{
				0%{transform:rotate(0deg)}
				100%{transform:rotate(180deg)}
			}
			.flower7{
				position:absolute;
				top:100px;
				left:0;
				width:100px;
				height:25px;
				background:yellow;
				border-radius:50%;
				transform-origin:100% 50%;
				animation:flower-7 2s linear infinite;
			}
			@keyframes flower-7{
				0%{transform:rotate(0deg)}
				100%{transform:rotate(210deg)}
			}
			.flower8{
				position:absolute;
				top:100px;
				left:0;
				width:100px;
				height:25px;
				background:yellow;
				border-radius:50%;
				transform-origin:100% 50%;
				animation:flower-84 2s linear infinite;
			}
			@keyframes flower-8{
				0%{transform:rotate(0deg)}
				100%{transform:rotate(240deg)}
			}
			.flower9{
				position:absolute;
				top:100px;
				left:0;
				width:100px;
				height:25px;
				background:yellow;
				border-radius:50%;
				transform-origin:100% 50%;
				animation:flower-9 2s linear infinite;
			}
			@keyframes flower-9{
				0%{transform:rotate(0deg)}
				100%{transform:rotate(270deg)}
			}
			.flower10{
				position:absolute;
				top:100px;
				left:0;
				width:100px;
				height:25px;
				background:yellow;
				border-radius:50%;
				transform-origin:100% 50%;
				animation:flower-10 2s linear infinite;
			}
			@keyframes flower-10{
				0%{transform:rotate(0deg)}
				100%{transform:rotate(300deg)}
			}
			.flower11{
				position:absolute;
				top:100px;
				left:0;
				width:100px;
				height:25px;
				background:yellow;
				border-radius:50%;
				transform-origin:100% 50%;
				animation:flower-11 2s linear infinite;
			}
			@keyframes flower-11{
				0%{transform:rotate(0deg)}
				100%{transform:rotate(330deg)}
			}		
			/*花结束*/
			/*图片显示开始*/
			.pic{
				position:relative;
				display:inline-block;
				width:200px;
				height:200px;
				margin:50px 0 0 50px;
			}
			.img{
				position:absolute;
				top:50px;
				left:50px;
				width:100px;
				height:100px;
				background:url("images/01.jpg")0 0/cover;
				animation:pic-top 2s linear infinite;
			}
			@keyframes pic-top{
				0%{
					transform:scale(0);
				}
				100%{
					transform:scale(1);
				}
			}
			.pic div:nth-child(2){
				position:absolute;
				top:0;
				left:0;
				width:200px;
				height:5px;
				background:black;
				animation:pic-top-top 2s linear infinite;
			}
			@keyframes pic-top-top{
				0%{
					width:0;
					height:5px;
	
				}
				100%{
					width:200px;
					height:5px;
				}
			}
			.pic div:nth-child(3){
				position:absolute;
				top:0;
				right:0;
				width:5px;
				height:200px;
				background:black;
				animation:pic-top-right 2s linear infinite;
			}
			@keyframes pic-top-right{
				0%{
					width:5px;
					height:0;
				}
				100%{
					width:5px;
					height:200px;
				}
			}
			.pic div:nth-child(4){
				position:absolute;
				top:0;
				left:0;
				width:5px;
				height:200px;
				background:black;
			}
			.pic div:nth-child(5){
				position:absolute;
				top:0;
				left:0;
				width:5px;
				height:200px;
				background:white;
				animation:pic-top-left 2s linear infinite;
			}
			@keyframes pic-top-left{
				0%{
					height:200px;
				}
				100%{
					height:0;
				}
			}
			.pic div:nth-child(6){
				position:absolute;
				bottom:0;
				left:0;
				width:200px;
				height:5px;
				background:black;
			}
			.pic div:nth-child(7){
				position:absolute;
				bottom:0;
				left:0;
				width:200px;
				height:5px;
				background:white;
				animation:pic-top-bottom 2s linear infinite;
			}
			@keyframes pic-top-bottom{
				0%{
					width:200px;
				}
				100%{
					width:0;
				}
			}
			/*图片显示结束*/
			/*爱心开始*/
			.heart{
				position:relative;
				display:inline-block;
				margin:50px 0 0 50px;
				width:200px;
				height:200px;
				animation:heart .3s linear infinite forwards;
			}
			@keyframes heart{
				0%{
					transform:scale(1);
				}
				25%{
					transform:scale(1.2);
				}
				50%{
					transform:scale(1);
				}
				75%{
					transform:scale(0.8);
				}
				100%{
					transform:scale(1);
				}
			}
			.heart-left{
				position:absolute;
				top:15px;
				left:68px;
				width:100px;
				height:150px;
				background:red;
				border-radius:50% 50% 0 0;
				transform:rotate(45deg);
			}
			.heart-right{
				position:absolute;
				top:15px;
				left:30px;
				width:100px;
				height:150px;
				background:red;
				border-radius:50% 50% 0 0;
				transform:rotate(-45deg);
			}
			.heart p{
				position:absolute;
				top:80px;
				left:55px;
				font-size:18px;
				color:#fff;
				animation:heart .3s linear infinite forwards;
			}
			@keyframes p{
				0%{
					transform:scale(1);
				}
				25%{
					transform:scale(1.2);
				}
				50%{
					transform:scale(1);
				}
				75%{
					transform:scale(0.8);
				}
				100%{
					transform:scale(1);
				}
			}
			/*爱心结束*/
		</style>
	</head>
	<body>
		<!--太极图开始-->
		<div class="box1">
			<div class="box2"></div>
			<div class="box3"></div>
			<div class="box4"></div>
			<div class="box5"></div>
			<div class="box6"></div>
			<div class="box7"></div>
		</div>
		<!--太极图结束-->
		<!--花瓣开始-->
		<div class="flower">
			<div class="flower0"></div>
			<div class="flower1"></div>
			<div class="flower2"></div>
			<div class="flower3"></div>
			<div class="flower4"></div>
			<div class="flower5"></div>
			<div class="flower6"></div>
			<div class="flower7"></div>
			<div class="flower8"></div>
			<div class="flower9"></div>
			<div class="flower10"></div>
			<div class="flower11"></div>
		</div>
		<!--花瓣结束-->
		<!--图片显示开始-->
		<div class="pic">
			<div class="img"></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<!--图片显示结束-->
		<!--爱心开始-->
		<div class="heart">
			<div class="heart-left"></div>
			<div class="heart-right"></div>
			<p>乌拉爱你哦</p>
		</div>
		<!--爱心结束-->
	</body>
</html>
